<template>
  <commonDialog
    :show="dialogConfig.show"
    :title="dialogConfig.title"
    :buttons="dialogConfig.buttons"
    width="400px"
    :show-cancel="false"
    @close="dialogConfig.show = false"
  >
    <div class="coin-panel">
      <div class="title-info">
        给UP主投上 <span class="icon-count">{{ coinCount }}</span
        >枚硬币
      </div>
      <div class="coin-list">
        <div :class="['coin-item', coinCount == 1 ? 'active' : '']" @click="setCoinCount(1)">
          <img :src="getLocalImage('coin1.png')" alt="" />
          <div class="coin-count-inner">1硬币</div>
        </div>
        <div :class="['coin-item', coinCount == 2 ? 'active' : '']" @click="setCoinCount(2)">
          <img :src="getLocalImage('coin1.png')" alt="" />
          <div class="coin-count-inner">2硬币</div>
        </div>
      </div>
      <div class="sub-btn">
        <el-button type="primary" @click="submitCoin">确定</el-button>
      </div>
    </div>
  </commonDialog>
</template>

<script setup lang="ts">
import { VideoDoActionHttpRequest } from '@/services/api/video'
import { getLocalImage } from '@/utils/utilsFun'
import { inject, ref } from 'vue'
import { useRoute } from 'vue-router'
import { ACTION_TYPE } from '@/utils/Constants'
import message from '@/utils/message'
import { mitter } from '@/eventbus/eventBus'

const route = useRoute()
const dialogConfig = ref({
  show: false,
  title: '投币',
  buttons: []
})

const coinCount = ref<1 | 2>(1)

const setCoinCount = (count: 1 | 2) => {
  coinCount.value = count
}

const videoInfoDetail: any = inject('videoInfo')

//投币
const submitCoin = async () => {
  await VideoDoActionHttpRequest({
    videoId: route.params.videoId as string,
    actionType: ACTION_TYPE.VIDEO_COIN.value,
    actionCount: coinCount.value
  })
  dialogConfig.value.show = false
  videoInfoDetail.value.videoInfo.coinCount =
    coinCount.value + videoInfoDetail.value.videoInfo.coinCount
  mitter.emit('setCoinStatus')
  message.success('投币成功')
}

const show = () => {
  dialogConfig.value.show = true
}

defineExpose({
  show
})
</script>

<style lang="less" scoped>
.coin-panel {
  .title-info {
    text-align: center;
    font-size: 16px;
    .coin-count {
      font-size: 18px;
      padding: 0px 3px;
      color: var(--blue2);
    }
  }
  .coin-list {
    margin-top: 30px;
    display: flex;
    justify-content: space-around;
    .coin-item {
      width: 150px;
      border: 2px dashed #ddd;
      border-radius: 5px;
      overflow: hidden;
      position: relative;
      cursor: pointer;
      &:hover {
        border: 2px solid var(--blue);
        .coin-count-inner {
          color: var(--blue);
        }
      }
      img {
        width: 100%;
      }
      .coin-count-inner {
        position: absolute;
        left: 10px;
        top: 10px;
        color: var(--text3);
      }
    }
    .active {
      border: 2px solid var(--blue);
      .coin-count-inner {
        color: var(--blue);
      }
    }
  }
  .sub-btn {
    text-align: center;
    margin: 30px 0px 5px 0px;
  }
}
</style>
